<template>
  <div>
    <a-modal v-model="reVisible"
             width="60%"
             title="任务提醒设置"
             @ok="handleOk">
      <a-form-model ref="remind"
                    :model="remind"
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 22 }"
                    :rules="{
                      remindModeTmp: [{ required: true, message: '请选择提醒方式' }],
                    }">
        <a-form-model-item :label-col="{ span: 2 }"
                           :wrapper-col="{ span: 22 }"
                           label="提醒时间">
          <a-row>
            <a-col :span="6">
              <a-select style="width: 100%"
                        v-model="remind.remindType">
                <a-select-option value="0"> 任务开始后 </a-select-option>
                <a-select-option value="1"> 任务截止前 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="1"> </a-col>
            <a-col :span="6">
              <a-input-number :min="0"
                              style="width: 100%"
                              v-model="remind.unitValue"
                              placeholder="请输入">
              </a-input-number>
            </a-col>
            <a-col :span="1"> </a-col>
            <a-col :span="6">
              <a-select style="width: 100%"
                        v-model="remind.unit">
                <a-select-option value="minute"> 分钟 </a-select-option>
                <a-select-option value="hour"> 小时 </a-select-option>
                <a-select-option value="day"> 天 </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item prop="remindModeTmp"
                           label="提醒方式">
          <a-checkbox-group v-model="remind.remindModeTmp"
                            @change="remindChange(remind)">
            <a-checkbox value="0"> 站内消息 </a-checkbox>
            <a-checkbox value="1"> 短信 </a-checkbox>
            <a-checkbox value="2"> 政务钉钉 </a-checkbox>
            <a-checkbox value="3"> 魔粒APP推送 </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-form-model ref="form"
                  :model="form"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 16 }"
                  :rules="{
      startTimeTmp: [{ required: true, message: '请输入开始时间', trigger: 'change' }],
    }">

      <slot name="taskBasicComp"
            :fn="taskBasicValue"
            :value="{
              ...form
            }" />

      <slot name="taskTypeComp"
            :fn="taskTypeValue"
            :value="{
              ...form
            }" />

      <template>
        <a-divider orientation="left">提醒策略</a-divider>

        <a-form-model-item label="重复周期"
                           prop="jobRepetitionType">
          <a-select style="width: 100%"
                    v-model="form.jobRepetitionType"
                    @change="typeChange">
            <a-select-option value="norepeat"> 不重复 </a-select-option>
            <a-select-option value="day"> 每天重复 </a-select-option>
            <a-select-option value="week"> 每周重复 </a-select-option>
            <a-select-option value="month"> 每月重复 </a-select-option>
            <a-select-option value="quarter"> 每季重复 </a-select-option>
            <a-select-option value="year"> 每年重复 </a-select-option>
            <a-select-option value="weekday"> 工作日重复 </a-select-option>
            <a-select-option value="custom"> 自定义重复 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="开始时间"
                           prop="startTimeTmp"
                           help="表单的推送时间"
                           required>
          <a-date-picker style="width: 100%"
                         v-model="form.startTimeTmp"
                         @change="startTimeChange"
                         show-time
                         clearable
                         format="YYYY-MM-DD HH:mm" />
        </a-form-model-item>
        <a-form-model-item label="结束重复"
                           v-show="form.jobRepetitionType != 'norepeat'">
          <a-select style="width: 100%"
                    v-model="form.endRepetitionType"
                    @change="endTypeChange">
            <a-select-option value="0"> 一直重复 </a-select-option>
            <a-select-option value="1"> 按日期结束 </a-select-option>
            <a-select-option value="2"> 按次数结束 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="截止时间"
                           prop="endTimeTmp"
                           help="表单失效时间"
                           v-show="
                             form.jobRepetitionType == 'norepeat' || form.endRepetitionType == 1
                           ">
          <a-date-picker style="width: 100%"
                         v-model="form.endTimeTmp"
                         @change="endTimeChange"
                         show-time
                         clearable
                         format="YYYY-MM-DD HH:mm" />
        </a-form-model-item>
        <a-form-model-item label="重复次数"
                           prop="endNumber"
                           v-show="
                             form.jobRepetitionType != 'norepeat' && form.endRepetitionType == 2
                           ">
          <a-input-number placeholder="请输入"
                          style="width: 100%"
                          v-model="form.endNumber"
                          :min="1"
                          :max="10000" />
        </a-form-model-item>
        <div v-show="form.jobRepetitionType == 'custom'">
          <a-form-model-item label="每"
                             :colon="false"
                             prop="">
            <!-- <a-col :span="1"><b>每</b></a-col> -->
            <a-col :span="11">
              <a-input-number placeholder="请输入间隔时间"
                              style="width: 100%"
                              v-model="form.jobConsumerVo.value"
                              :min="1"
                              :max="10000" />
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="12">
              <a-select style="width: 100%"
                        v-model="form.jobConsumerVo.unit"
                        @change="dayUnitChange">
                <a-select-option value="day"> 天 </a-select-option>
                <a-select-option value="week"> 周 </a-select-option>
                <a-select-option value="month"> 月 </a-select-option>
              </a-select>
            </a-col>
          </a-form-model-item>
          <a-form-model-item v-show="form.jobConsumerVo.value"
                             label=" "
                             :colon="false">
            <font color="#999999">每隔{{
              convertToChinaNum(form.jobConsumerVo.value)
            }}{{
              form.jobConsumerVo.unit == 'day'
                ? '天'
                : form.jobConsumerVo.unit == 'week'
                  ? '周'
                  : '个月'
            }}{{
              form.jobConsumerVo.unit == 'week'
                ? (selectWeeks.length == 0) ? '' : '，' +
                  selectWeeks
                    .map((item) => {
                      return '周' + item.title
                    }).toString()
                : form.jobConsumerVo.unit == 'month'
                  ? (selectDays.length == 0) ? '' : '，' +
                    selectDays
                      .map((item) => {
                        return item.title
                      })
                      .toString() + (selectDays.length > 0 ? '号' : '')
                  : ''
            }}
              重复</font>
          </a-form-model-item>
          <a-form-model-item label=" "
                             :colon="false"
                             v-show="form.jobConsumerVo.unit != 'day'">
            <!-- 重复时间为1周（每周重复） -->
            <div class="weeks-panel"
                 v-show="form.jobConsumerVo.unit == 'week'">
              <div class="weeks-panel-item"
                   :class="{ active: week.selected }"
                   v-for="(week, index) in weeks"
                   :key="index"
                   @click="handleWeek(week, index)">
                {{ week.title }}
              </div>
            </div>
            <!-- 重复时间为1月（每月重复） -->
            <div class="days-panel"
                 v-show="form.jobConsumerVo.unit == 'month'"
                 style="margin-top: 20px">
              <div class="days-panel-item"
                   :class="{ active: day.selected }"
                   v-for="(day, index) in days"
                   :key="index"
                   @click="handleDay(day, index)">
                {{ day.title }}
                <!-- <a-icon type="check"
                            v-show="day.selected" /> -->
              </div>
            </div>
          </a-form-model-item>

          <a-form-model-item label="跳过法定节假日"
                             prop="">
            <a-switch v-model="form.jobConsumerVo.holiday"
                      checked-children="是"
                      un-checked-children="否" />
          </a-form-model-item>
          <a-form-model-item label="跳过双休日"
                             prop=""
                             v-show="form.jobConsumerVo.unit != 'week'">
            <a-switch v-model="form.jobConsumerVo.weekend"
                      checked-children="是"
                      un-checked-children="否" />
          </a-form-model-item>
        </div>

        <a-form-model-item label="填报时间"
                           v-show="form.jobRepetitionType != 'norepeat'">
          <a-row>
            <a-col :span="4"
                   v-show="form.jobRepetitionType == 'quarter'">
              <a-select style="width: 100%"
                        v-model="jiduStart">
                <a-select-option value="1"> 第一个月 </a-select-option>
                <a-select-option value="2"> 第二个月 </a-select-option>
                <a-select-option value="3"> 第三个月 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="
              form.jobRepetitionType == 'week' ||
                form.jobRepetitionType == 'month' ||
                form.jobRepetitionType == 'year'
                ? 5
                : form.jobRepetitionType == 'quarter'
                  ? 4
                  : 0
            ">
              <a-date-picker style="width: 100%"
                             v-show="form.jobRepetitionType == 'year'"
                             v-model="yearStart"
                             clearable
                             format="MM-DD" />
              <a-select style="width: 100%"
                        v-model="weekStart"
                        v-show="form.jobRepetitionType == 'week'">
                <a-select-option value="1"> 周一 </a-select-option>
                <a-select-option value="2"> 周二 </a-select-option>
                <a-select-option value="3"> 周三 </a-select-option>
                <a-select-option value="4"> 周四 </a-select-option>
                <a-select-option value="5"> 周五 </a-select-option>
                <a-select-option value="6"> 周六 </a-select-option>
                <a-select-option value="7"> 周日 </a-select-option>
              </a-select>
              <a-select style="width: 100%"
                        v-model="monthStart"
                        v-show="
                          form.jobRepetitionType == 'month' ||
                            form.jobRepetitionType == 'quarter'
                        ">
                <a-select-option value="1"> 1号 </a-select-option>
                <a-select-option value="2"> 2号 </a-select-option>
                <a-select-option value="3"> 3号 </a-select-option>
                <a-select-option value="4"> 4号 </a-select-option>
                <a-select-option value="5"> 5号 </a-select-option>
                <a-select-option value="6"> 6号 </a-select-option>
                <a-select-option value="7"> 7号 </a-select-option>
                <a-select-option value="8"> 8号 </a-select-option>
                <a-select-option value="9"> 9号 </a-select-option>
                <a-select-option value="10"> 10号 </a-select-option>
                <a-select-option value="11"> 11号 </a-select-option>
                <a-select-option value="12"> 12号 </a-select-option>
                <a-select-option value="13"> 13号 </a-select-option>
                <a-select-option value="14"> 14号 </a-select-option>
                <a-select-option value="15"> 15号 </a-select-option>
                <a-select-option value="16"> 16号 </a-select-option>
                <a-select-option value="17"> 17号 </a-select-option>
                <a-select-option value="18"> 18号 </a-select-option>
                <a-select-option value="19"> 19号 </a-select-option>
                <a-select-option value="20"> 20号 </a-select-option>
                <a-select-option value="21"> 21号 </a-select-option>
                <a-select-option value="22"> 22号 </a-select-option>
                <a-select-option value="23"> 23号 </a-select-option>
                <a-select-option value="24"> 24号 </a-select-option>
                <a-select-option value="25"> 25号 </a-select-option>
                <a-select-option value="26"> 26号 </a-select-option>
                <a-select-option value="27"> 27号 </a-select-option>
                <a-select-option value="28"> 28号 </a-select-option>
                <a-select-option value="29"> 29号 </a-select-option>
                <a-select-option value="30"> 30号 </a-select-option>
                <a-select-option value="-2"> 倒数第二天 </a-select-option>
                <a-select-option value="-1"> 倒数第一天 </a-select-option>
              </a-select>
            </a-col>

            <a-col :span="
              form.jobRepetitionType == 'day' ||
                form.jobRepetitionType == 'weekday' ||
                form.jobRepetitionType == 'custom'
                ? 11
                : form.jobRepetitionType == 'week' ||
                  form.jobRepetitionType == 'month' ||
                  form.jobRepetitionType == 'year'
                  ? 5
                  : 3
            ">
              <a-time-picker style="width: 100%"
                             v-model="startFillInTime"
                             format="HH:mm" />
            </a-col>
            <a-col :span="
                     form.jobRepetitionType == 'day' ||
                       form.jobRepetitionType == 'quarter' ||
                       form.jobRepetitionType == 'weekday' ||
                       form.jobRepetitionType == 'custom'
                       ? 2
                       : 4
                   "
                   style="text-align: center">
              至
            </a-col>
            <a-col :span="4"
                   v-show="form.jobRepetitionType == 'quarter'">
              <a-select style="width: 100%"
                        v-model="jiduEnd">
                <a-select-option value="1"> 第一个月 </a-select-option>
                <a-select-option value="2"> 第二个月 </a-select-option>
                <a-select-option value="3"> 第三个月 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="
              form.jobRepetitionType == 'week' ||
                form.jobRepetitionType == 'month' ||
                form.jobRepetitionType == 'year'
                ? 5
                : form.jobRepetitionType == 'quarter'
                  ? 4
                  : 0
            ">
              <a-date-picker style="width: 100%"
                             v-model="yearEnd"
                             v-show="form.jobRepetitionType == 'year'"
                             clearable
                             format="MM-DD" />
              <a-select style="width: 100%"
                        v-model="weekEnd"
                        v-show="form.jobRepetitionType == 'week'">
                <a-select-option value="1"> 周一 </a-select-option>
                <a-select-option value="2"> 周二 </a-select-option>
                <a-select-option value="3"> 周三 </a-select-option>
                <a-select-option value="4"> 周四 </a-select-option>
                <a-select-option value="5"> 周五 </a-select-option>
                <a-select-option value="6"> 周六 </a-select-option>
                <a-select-option value="7"> 周日 </a-select-option>
              </a-select>
              <a-select style="width: 100%"
                        v-model="monthEnd"
                        v-show="
                          form.jobRepetitionType == 'month' ||
                            form.jobRepetitionType == 'quarter'
                        ">
                <a-select-option value="1"> 1号 </a-select-option>
                <a-select-option value="2"> 2号 </a-select-option>
                <a-select-option value="3"> 3号 </a-select-option>
                <a-select-option value="4"> 4号 </a-select-option>
                <a-select-option value="5"> 5号 </a-select-option>
                <a-select-option value="6"> 6号 </a-select-option>
                <a-select-option value="7"> 7号 </a-select-option>
                <a-select-option value="8"> 8号 </a-select-option>
                <a-select-option value="9"> 9号 </a-select-option>
                <a-select-option value="10"> 10号 </a-select-option>
                <a-select-option value="11"> 11号 </a-select-option>
                <a-select-option value="12"> 12号 </a-select-option>
                <a-select-option value="13"> 13号 </a-select-option>
                <a-select-option value="14"> 14号 </a-select-option>
                <a-select-option value="15"> 15号 </a-select-option>
                <a-select-option value="16"> 16号 </a-select-option>
                <a-select-option value="17"> 17号 </a-select-option>
                <a-select-option value="18"> 18号 </a-select-option>
                <a-select-option value="19"> 19号 </a-select-option>
                <a-select-option value="20"> 20号 </a-select-option>
                <a-select-option value="21"> 21号 </a-select-option>
                <a-select-option value="22"> 22号 </a-select-option>
                <a-select-option value="23"> 23号 </a-select-option>
                <a-select-option value="24"> 24号 </a-select-option>
                <a-select-option value="25"> 25号 </a-select-option>
                <a-select-option value="26"> 26号 </a-select-option>
                <a-select-option value="27"> 27号 </a-select-option>
                <a-select-option value="28"> 28号 </a-select-option>
                <a-select-option value="29"> 29号 </a-select-option>
                <a-select-option value="30"> 30号 </a-select-option>
                <a-select-option value="-2"> 倒数第二天 </a-select-option>
                <a-select-option value="-1"> 倒数第一天 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="
              form.jobRepetitionType == 'day' ||
                form.jobRepetitionType == 'weekday' ||
                form.jobRepetitionType == 'custom'
                ? 11
                : form.jobRepetitionType == 'week' ||
                  form.jobRepetitionType == 'month' ||
                  form.jobRepetitionType == 'year'
                  ? 5
                  : 3
            ">
              <a-time-picker style="width: 100%"
                             v-model="endFillInTime"
                             clearable
                             format="HH:mm" />
            </a-col>
          </a-row>
        </a-form-model-item>

        <template v-if="showEndFillInAndUpdateFillIn">
          <a-form-model-item label="逾期后允许填报"
                             v-show="form.endTimeTmp != null || endFillInTime != null"
                             prop="">
            <a-switch v-model="form.endFillIn"
                      checked-children="开"
                      un-checked-children="关" />
          </a-form-model-item>
          <a-form-model-item label="已填报允许修改"
                             prop="">
            <a-switch v-model="form.updateFillIn"
                      checked-children="开"
                      un-checked-children="关" />
          </a-form-model-item>
        </template>

        <a-form-model-item prop="tx">
          <span slot="label">
            任务提醒
            <a-tooltip title="表单填写任务提醒规则设置">
              <a-icon type="question-circle-o" />
            </a-tooltip>
          </span>
          <a-row class="row-style"
                 v-for="(item, index) in form.remindVoList"
                 :key="index">
            <a-col :span="20"
                   class="font-style">
              <div style="margin-left: 5px">
                {{ item.remindType == 0 ? '任务开始后' : '任务截止前' }}
                {{ item.unitValue }}
                {{
                  item.unit == 'minute'
                    ? '分钟'
                    : item.unit == 'hour'
                      ? '小时'
                      : '天'
                }}
              </div>
            </a-col>
            <a-col :span="2">
              <a-icon style="margin-left: 10px"
                      type="edit"
                      @click="editRemind(item, index)"
                      class="font-style" />
            </a-col>
            <a-col :span="2">
              <a-popconfirm title="是否移除该项配置？"
                            placement="topRight"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="confirm(index)">
                <a-icon type="delete"
                        @click="deleteRm"
                        class="font-style" />
              </a-popconfirm>
            </a-col>
          </a-row>
          <a-row>
            <a-button icon="plus"
                      style="width: 100%"
                      type="primary"
                      ghost
                      @click="addRemind">
              添加提醒
            </a-button>
          </a-row>
        </a-form-model-item>
      </template>

      <a-divider orientation="left">
        任务接收人
      </a-divider>

      <slot name="ExtraComp2"
            :fn="taskTypeValue"
            :value="{
              ...form
            }" />

      <slot name="TaskRecipientComp"
            :fn="taskRecipientValue"
            :value="{
              userList,
              roleList,
              unitList,
              memberUsers,
              memberUnits,
              memberRoles
            }" />

      <slot name="ExtraComp"
            :fn="taskTypeValue"
            :value="{
              ...form
            }" />

      <div style="margin-top: 20px; text-align: center">
        <a-button style="margin-right:5px;"
                  @click="returnBack">
          返回
        </a-button>
        <ZOkButton @click="handleSubmit">
          <template solt>保存</template>
        </ZOkButton>

      </div>
    </a-form-model>
  </div>
</template>

<script>
import { ZOkButton } from '@zh/components-ant'
import moment from 'moment'
import PropTypes from '@zh/common-utils/prop-types'
import { jobManageAdd, getCronJobInfo, getCronJobInfoGet, jobManageUpdate } from '../../../api/schedule'

export default {
  name: 'ScheduleViewEdit',
  components: {
    ZOkButton
  },
  props: {
    businessId: PropTypes.string.def(''),
    // applicationMenuVersionId: PropTypes.string.def(''),
    jobId: PropTypes.string.def(''),
    showEndFillInAndUpdateFillIn: PropTypes.bool.def(false),
    back: { // 返回回调
      type: Function,
      default: undefined
    },
    submit: { // 确定回调
      type: Function,
      default: undefined
    },
    extraValidateForm: { // 额外表单校验
      type: Function,
      default: undefined
    },
    getFormInfoApi: { // 表单回显接口
      type: Function,
      default: undefined
    }
  },
  data () {
    return {
      plainOptions: ['Apple', 'Pear', 'Orange'],
      createTime: [],
      userList: [],
      roleList: [],
      unitList: [],
      weekStart: '',
      weekEnd: '',
      monthStart: '',
      monthEnd: '',
      jiduStart: '',
      jiduEnd: '',
      yearStart: moment('01-01', 'MM-DD'),
      yearEnd: moment('12-31', 'MM-DD'),
      startFillInTime: moment('00:00', 'HH:mm'),
      endFillInTime: moment('23:59', 'HH:mm'),
      memberUsers: [],
      memberUnits: [],
      memberRoles: [],
      form: {
        jobConsumerVo: {
          selectValue: '',
          selectUnit: 'day',
          unit: 'day',
          value: 1
        },
        taskStatus: true,
        jobRepetitionType: 'norepeat',
        endRepetitionType: '0',
        remindVoList: [],
        startFillInMonth: '',
        startFillInDay: '',
        startFillInHour: '',
        startFillInMinute: '',
        endFillInMonth: '',
        endFillInDay: '',
        endFillInHour: '',
        endFillInMinute: '',
        startFillInWeek: '',
        endFillInWeek: '',
        endFillInYear: '',
        startFillInYear: ''

      },
      remind: {
        remindType: '0',
        unit: 'minute',
        unitValue: 0,
        remindModeTmp: ['0']
      },
      reVisible: false,
      weeks: [
        { val: '1', title: '一', selected: false },
        { val: '2', title: '二', selected: false },
        { val: '3', title: '三', selected: false },
        { val: '4', title: '四', selected: false },
        { val: '5', title: '五', selected: false },
        { val: '6', title: '六', selected: false },
        { val: '7', title: '日', selected: false }
      ],
      days: [],
      selectWeeks: [], // 每周重复-选中的星期
      selectDays: [] // 每月重复-选中的具体日期
    }
  },
  watch: {
    startFillInTime: {
      handler (v) {
        if (v) {
          this.form.startFillInHour = v.hour()
          this.form.startFillInMinute = v.minute()
        }
      },
      deep: true,
      immediate: true
    },
    jobId: {
      handler (v) {
        if (v) {
          this.getCronJobInfo()
        }
      },
      deep: true,
      immediate: true
    },
    endFillInTime: {
      handler (v) {
        if (v) {
          if (this.form.jobRepetitionType != 'norepeat') {
            this.form.endFillInHour = v.hour()
            this.form.endFillInMinute = v.minute()
          }
        }
      },
      deep: true,
      immediate: true
    },
    jiduStart: {
      handler (v) {
        if (v) {
          this.form.startFillInMonth = v
        }
      },
      deep: true,
      immediate: true
    },
    jiduEnd: {
      handler (v) {
        if (v) {
          this.form.endFillInMonth = v
        }
      },
      deep: true,
      immediate: true
    },
    weekStart: {
      handler (v) {
        if (v) {
          this.form.startFillInWeek = v
        }
      },
      deep: true,
      immediate: true
    },
    weekEnd: {
      handler (v) {
        if (v) {
          this.form.endFillInWeek = v
        }
      },
      deep: true,
      immediate: true
    },
    yearStart: {
      handler (v) {
        if (v) {
          this.form.startFillInMonth = v.month() + 1
          this.form.startFillInDay = v.date()
        }
      },
      deep: true,
      immediate: true
    },
    yearEnd: {
      handler (v) {
        if (v) {
          this.form.endFillInMonth = v.month() + 1
          this.form.endFillInDay = v.date()
        }
      },
      deep: true,
      immediate: true
    },
    monthStart: {
      handler (v) {
        if (v) {
          this.form.startFillInDay = v
        }
      },
      deep: true,
      immediate: true
    },
    monthEnd: {
      handler (v) {
        if (v) {
          this.form.endFillInDay = v
        }
      },
      deep: true,
      immediate: true
    }

  },
  created () {
    this.initDay()
    this.resetTimeData()
  },
  methods: {
    // 任务基本信息组件 返回值，适配原表单逻辑
    taskBasicValue (val) {
      this.form = {
        ...this.form,
        ...val
      }
    },
    // 任务类型组件 返回值，适配原表单逻辑
    taskTypeValue (val) {
      this.form = {
        ...this.form,
        ...val
      }
    },
    // 任务接收人组件返回值，赋值到this中，适配原表单逻辑
    taskRecipientValue (val) {
      const {
        userList = [],
        roleList = [],
        unitList = [],
        memberUsers = [],
        memberUnits = [],
        memberRoles = []
      } = val
      this.userList = userList
      this.roleList = roleList
      this.unitList = unitList
      this.memberUsers = memberUsers
      this.memberUnits = memberUnits
      this.memberRoles = memberRoles
    },
    initDay () {
      for (let i = 1; i <= 31; i++) {
        this.days.push({
          day: i + '',
          title: i + '',
          selected: false
        })
      }
    },
    dayUnitChange () {
      // 重置自定义
      this.form.jobConsumerVo.selectValue = ''
      for (let i = 0; i < this.days.length; i++) {
        if (i < 7) {
          this.weeks[i].selected = false
        }
        this.days[i].selected = false
      }
    },
    getCronJobInfo () {
      if (this.getFormInfoApi) {
        this.getFormInfoApi(this.jobId).then((res) => {
          this.initData(res)
        })
      } else {
        getCronJobInfoGet(this.jobId).then((res) => {
          this.initData(res)
        })
      }
    },
    initData (rep) {
      if (rep) {
        const { jsonValue = '', ...ohter } = rep
        let obj = jsonValue ? JSON.parse(jsonValue) : {}
        this.form = {
          ...ohter,
          ...obj
        }

        this.userList = []
        this.roleList = []
        this.unitList = []
        this.memberUsers = []
        this.memberUnits = []
        this.memberRoles = []
        this.$set(this.form, 'startTimeTmp', this.getMomentDate(rep.startTime))
        if (rep.endTime) {
          this.$set(this.form, 'endTimeTmp', this.getMomentDate(rep.endTime))
        }
        if (rep.startFillInHour != null && rep.startFillInMinute != null) {
          this.$set(this, 'startFillInTime', moment(rep.startFillInHour + ':' + rep.startFillInMinute, 'HH:mm'))
        }
        if (rep.endFillInHour != null && rep.endFillInMinute != null) {
          this.$set(this, 'endFillInTime', moment(rep.endFillInHour + ':' + rep.endFillInMinute, 'HH:mm'))
        }
        if (rep.startFillInWeek) {
          this.weekStart = rep.startFillInWeek.toString()
        }
        if (rep.endFillInWeek) {
          this.weekEnd = rep.endFillInWeek.toString()
        }
        if (rep.startFillInDay) {
          this.monthStart = rep.startFillInDay.toString()
        }
        if (rep.endFillInDay) {
          this.monthEnd = rep.endFillInDay.toString()
        }
        if (rep.startFillInMonth) {
          this.jiduStart = rep.startFillInMonth.toString()
        }
        if (rep.endFillInMonth) {
          this.jiduEnd = rep.endFillInMonth.toString()
        }
        if (rep.startFillInMonth) {
          this.jiduStart = rep.startFillInMonth.toString()
        }
        if (rep.endFillInMonth) {
          this.jiduEnd = rep.endFillInMonth.toString()
        }
        if (rep.startFillInMonth != null && rep.startFillInDay != null) {
          this.yearStart = moment(rep.startFillInMonth + ':' + rep.startFillInDay, 'MM-DD')
          this.yearEnd = moment(rep.endFillInMonth + ':' + rep.endFillInDay, 'MM-DD')
        }

        for (let i = 0; i < rep.remindVoList.length; i++) {
          rep.remindVoList[i].remindModeTmp = rep.remindVoList[i].remindMode.split(',')
        }
        if (rep.jobMemberVoList) {
          rep.jobMemberVoList.map((e) => {
            if (e.type == 1) {
              this.userList.push(e.memberId)
              this.memberUsers.push(
                {
                  memberId: e.memberId,
                  memberName: e.memberName,
                  type: 1
                }
              )
            } else if (e.type == 2) {
              this.unitList.push(e.memberId)
              this.memberUnits.push(
                {
                  memberId: e.memberId,
                  memberName: e.memberName,
                  type: 2
                }
              )
            } else if (e.type == 3) {
              this.roleList.push(e.memberId)
              this.memberRoles.push(
                {
                  memberId: e.memberId,
                  memberName: e.memberName,
                  type: 3
                }
              )
            }
          })
        }
        if (rep.jobConsumerVo) {
          if (rep.jobConsumerVo.selectValue.length > 0) {
            const arr = rep.jobConsumerVo.selectValue.split(',')
            for (let i = 0; i < arr.length; i++) {
              if (rep.jobConsumerVo.unit == 'week') {
                this.selectWeeks.push(this.weeks[arr[i] - 1])
                this.weeks[arr[i] - 1].selected = true
              } else if (rep.jobConsumerVo.unit == 'month') {
                this.selectDays.push(this.days[arr[i] - 1])
                this.days[arr[i] - 1].selected = true
              }
            }
          }
        } else {
          this.form.jobConsumerVo = {
            selectValue: '',
            selectUnit: 'day',
            unit: 'day',
            value: 1
          }
        }
      }
    },
    getMomentDate (ns) {
      if (ns == 0) {
        return null
      } else {
        return moment(new Date(parseInt(ns)))
      }
    },
    isLeap () {
      // 闰年判断倒数第一天，第二天
      const year = moment().format('YYYY')
      if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
        return true
      }
      return false
    },
    LastTwoDay () {
      if (this.monthStart < 0) {
        // 倒数第一天
        if (this.monthStart == -1) {
          if (this.monthEnd == -2 || this.monthEnd < 31) {
            this.message.warning('填报开始日应大于结束日')
            return
          }
        }
        // TODO
      }
      if (this.monthEnd < 0) {
        // 倒数第一天
        if (this.monthEnd == -2) {
          if (this.monthStart == -1) {
            this.message.warning('填报开始日应大于结束日')
            return
          }
          if (this.monthStart > 30) {
            this.message.warning('填报开始日应大于结束日')
            return
          }
        } else {
          // -1

        }
        // TODO
      }
    },
    validateForm () {
      // 闰年
      // const leap = this.isLeap();

      if (this.form.endTimeTmp && this.form.startTimeTmp.isAfter(this.form.endTimeTmp)) {
        this.message.warning('开始日期应该大于截止日期')
        return false
      }
      if (this.form.jobRepetitionType == 'norepeat') {
        // 不重复
        this.form.startFillInWeek = ''
        this.form.endFillInWeek = ''
      } else if (this.form.jobRepetitionType == 'day' || this.form.jobRepetitionType == 'weekday' || this.form.jobRepetitionType == 'custom') {
        // 每天/工作日重复
        this.form.startFillInYear = ''
        this.form.startFillInMonth = ''
        this.form.startFillInDay = ''
        this.form.startFillInWeek = ''
        this.form.endFillInYear = ''
        this.form.endFillInMonth = ''
        this.form.endFillInDay = ''
        this.form.endFillInWeek = ''
        // 填报时间区间
        if ((this.startFillInTime && this.endFillInTime) && this.startFillInTime.isAfter(this.endFillInTime)) {
          this.message.warning('填报开始时间应该大于结束时间')
          return false
        }
        if (this.form.jobRepetitionType == 'custom') {
          if (this.form.jobConsumerVo.selectValue.length == '') {
            if (this.form.jobConsumerVo.unit == 'week') {
              this.message.warning('请选择每周重复的日期')
              return false
            } else if (this.form.jobConsumerVo.unit == 'month') {
              this.message.warning('请选择每月重复的日期')
              return false
            }
          }
        }
      } else if (this.form.jobRepetitionType == 'week') {
        // 每周重复
        this.form.startFillInYear = ''
        this.form.startFillInMonth = ''
        this.form.startFillInDay = ''

        this.form.endFillInYear = ''
        this.form.endFillInMonth = ''
        this.form.endFillInDay = ''

        if (this.weekStart == this.weekEnd) {
          // 如果开始周开始小于等于周结束，时分直接大小判断
          if ((this.startFillInTime && this.endFillInTime) && this.startFillInTime.isAfter(this.endFillInTime)) {
            this.message.warning('填报开始时间应大于结束时间')
            return false
          }
        } else if (this.weekStart > this.weekEnd) {
          this.message.warning('填报开始周应大于结束周')
          return false
        }
      } else if (this.form.jobRepetitionType == 'month') {
        this.form.startFillInYear = ''
        this.form.startFillInMonth = ''

        this.form.endFillInYear = ''
        this.form.endFillInMonth = ''
        // 倒数第一天和第二天特殊处理
        // this.LastTwoDay()

        if (this.monthStart > 0 && this.monthEnd > 0) {
          if (this.monthStart == this.monthEnd) {
            if ((this.startFillInTime && this.endFillInTime) && this.startFillInTime.isAfter(this.endFillInTime)) {
              this.message.warning('填报开始时间应大于结束时间')
              return false
            }
          } else if (this.monthStart > this.monthEnd) {
            if (this.monthStart > 0 && this.monthEnd > 0) {
              this.message.warning('填报开始日应大于结束日')
              return false
            }
          }
        }
      } else if (this.form.jobRepetitionType == 'quarter') {
        this.form.startFillInYear = ''
        this.form.startFillInWeek = ''

        this.form.endFillInYear = ''
        this.form.endFillInWeek = ''
        if (this.jiduStart == this.jiduEnd) {
          if (this.monthStart > 0 && this.monthEnd > 0) {
            if (parseInt(this.monthStart) > parseInt(this.monthEnd)) {
              this.message.warning('填报开始日应大于结束日')
              return false
            }
          }
          if ((this.startFillInTime && this.endFillInTime) && this.startFillInTime.isAfter(this.endFillInTime)) {
            this.message.warning('填报开始时间应大于结束时间')
            return false
          }
        } else if (this.jiduStart > this.jiduEnd) {
          this.message.warning('填报开始月应大于结束月')
          return false
        }
      } else if (this.form.jobRepetitionType == 'year') {
        this.form.startFillInYear = ''
        this.form.startFillInWeek = ''

        this.form.endFillInYear = ''
        this.form.endFillInWeek = ''

        if ((this.yearStart && this.yearEnd) && this.yearStart.isAfter(this.yearStart)) {
          this.message.warning('开始日期应该大于截止日期')
          return false
        }
        if (this.yearStart - this.yearEnd == 0) {
          if ((this.startFillInTime && this.endFillInTime) && this.startFillInTime.isAfter(this.endFillInTime)) {
            this.message.warning('填报开始时间应大于结束时间')
            return false
          }
        }
      }
      if (this?.extraValidateForm) {
        return this?.extraValidateForm(this)
      }
      return true
    },
    // 结束方式切换处理冗余数据
    endTypeChange (v) {
      if (v == 0) {
        this.$set(this.form, 'endNumber', null)
        this.$set(this.form, 'endTimeTmp', null)
      } else if (v == 1) {
        this.$set(this.form, 'endNumber', null)
      } else if (v == 2) {
        this.$set(this.form, 'endTimeTmp', null)
      }
    },
    // tbStartTimeChange(v) {
    //   if(this.form.jobRepetitionType == 'day') {
    //     this.form.startFillInHour= v.hour()
    //     this.form.startFillInMinute= v.minute()
    //   }
    // },
    // tbEndTimeChange(v) {
    //   if(this.form.jobRepetitionType == 'day') {
    //     this.form.endFillInHour= v.hour()
    //     this.form.endFillInMinute= v.minute()
    //   }
    // },
    startTimeChange (v) {
      // 如果是不重复，开始结束时间，也是表单的时效时间
      if (this.form.jobRepetitionType == 'norepeat') {
        this.form.startFillInYear = v.year()
        this.form.startFillInMonth = v.month() + 1
        this.form.startFillInDay = v.date()
        this.form.startFillInHour = v.hour()
        this.form.startFillInMinute = v.minute()
      }
    },
    endTimeChange (v) {
      if (this.form.jobRepetitionType == 'norepeat') {
        this.form.endFillInYear = v.year()
        this.form.endFillInMonth = v.month() + 1
        this.form.endFillInDay = v.date()
        this.form.endFillInHour = v.hour()
        this.form.endFillInMinute = v.minute()
      }
    },

    // //重置时效参数
    // resetUseData() {

    // },
    // 重置时效参数
    resetTimeData () {
      this.form.startFillInMonth = ''
      this.form.startFillInDay = ''
      this.form.startFillInHour = ''
      this.form.startFillInMinute = ''
      this.form.endFillInMonth = ''
      this.form.endFillInDay = ''
      this.form.endFillInHour = ''
      this.form.endFillInMinute = ''
      this.form.startFillInWeek = ''
      this.form.endFillInWeek = ''
      this.form.endFillInYear = ''
      this.form.startFillInYear = ''
    },
    typeChange (v) {
      // 类型为不重复，结束类型为3
      if (v == 'norepeat') {
        this.form.endRepetitionType = '3'
      } else {
        if (this.form.endRepetitionType == '3') {
          this.form.endRepetitionType = '0'
        }
        this.startFillInTime = moment('00:00', 'HH:mm')
        this.endFillInTime = moment('23:59', 'HH:mm')
      }
      // this.$set(this.form, 'startTimeTmp', null)
      this.$set(this.form, 'endTimeTmp', null)

      // 周赋值
      if (v == 'week') {
        this.weekStart = '1'
        this.weekEnd = '7'
      } else if (v == 'month') {
        // 月
        this.monthStart = '1'
        this.monthEnd = '30'
      } else if (v == 'quarter') {
        // 月
        this.jiduStart = '1'
        this.jiduEnd = '3'
        this.monthStart = '1'
        this.monthEnd = '30'
      } else if (v == 'year') {
        this.yearStart = moment('01-01', 'MM-DD')
        this.yearEnd = moment('12-31', 'MM-DD')
      }

      this.resetTimeData()
    },
    handleDay (day, i) {
      if (day.selected) {
        this.days[i].selected = false
        let rs = this.selectDays.findIndex((item) => item.day == day.day)
        let da = [...this.selectDays]
        da.splice(rs, 1)
        this.selectDays = da
      } else {
        this.days[i].selected = true
        this.selectDays.push(day)
      }
      this.selectDays.sort(function (a, b) {
        return a.day - b.day // 正序
      })
      this.form.jobConsumerVo.selectValue = this.selectDays.map((item) => { return item.day }).toString()
    },
    handleWeek (week, i) {
      if (week.selected) {
        this.weeks[i].selected = false
        let rs = this.selectWeeks.findIndex((item) => item.val == week.val)
        let wee = [...this.selectWeeks]
        wee.splice(rs, 1)
        this.selectWeeks = wee
      } else {
        this.weeks[i].selected = true
        this.selectWeeks.push(week)
      }
      this.selectWeeks.sort(function (a, b) {
        return a.val - b.val // 正序
      })
      this.form.jobConsumerVo.selectValue = this.selectWeeks.map((item) => { return item.val }).toString()
    },
    userChange (all, user) {
      this.memberUsers = []
      for (let j = 0; j < user.length; j++) {
        const us = user[j]
        this.memberUsers.push({
          memberId: us.id,
          memberName: us.name,
          type: 1
        })
      }
    },
    roleChange (all, role) {
      this.memberRoles = []
      for (let j = 0; j < role.length; j++) {
        const ul = role[j]
        this.memberRoles.push({
          memberId: ul.id,
          memberName: ul.name,
          type: 3
        })
      }
    },
    unitChange (all, unit) {
      //
      // let mbs = []
      // //删除之前的机构数据
      // for (let i = 0; i < this.form.members.length; i++) {
      //   const mb = this.form.members[i]
      //   if (mb.type != 2) {
      //     mbs.push(mb)
      //   }
      // }
      // for (let j = 0; j < unit.length; j++) {
      //   const ut = unit[j]
      //   this.form.members.push({ memberId: ut.id, memberName: ut.name, type: 2 })
      // }

      this.memberUnits = []
      for (let j = 0; j < unit.length; j++) {
        const ut = unit[j]
        this.memberUnits.push({
          memberId: ut.id,
          memberName: ut.name,
          type: 2
        })
      }
    },
    addRemind () {
      this.reVisible = true
      this.remind = {
        remindType: '0',
        unit: 'minute',
        unitValue: 0,
        remindMode: ['0'],
        remindModeTmp: ['0']
      }
    },
    remindChange () {
      this.remind.remindMode = this.remind.remindModeTmp.toString()
    },
    handleOk () {
      this.$refs.remind.validate((valid) => {
        let tmp = JSON.parse(JSON.stringify(this.remind))
        if (valid) {
          if (this.remind.index == undefined) {
            this.form.remindVoList.push(tmp)
          } else {
            this.form.remindVoList[this.remind.index] = tmp
          }

          this.reVisible = false
        }
      })
    },
    deleteRm () { },
    editRemind (item, index) {
      let tmp = JSON.parse(JSON.stringify(item))
      tmp.index = index
      this.remind = tmp
      this.reVisible = true
    },
    confirm (index) {
      this.form.remindVoList.splice(index, 1)
    },

    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid && this.validateForm()) {
          // 区间开始结束验证，数据处理
          // 路由参数
          this.form.businessId = this.businessId
          // 时间戳
          this.form.startTime = Date.parse(this.form.startTimeTmp)
          if (this.form.endTimeTmp) {
            this.form.endTime = Date.parse(this.form.endTimeTmp)
          }
          this.form.jobMemberVoList = []
          if (this.userList) {
            for (let i = 0; i < this.memberUsers.length; i++) {
              const element1 = this.memberUsers[i]
              this.form.jobMemberVoList.push(element1)
            }
          }
          if (this.roleList) {
            for (let i = 0; i < this.memberRoles.length; i++) {
              const element2 = this.memberRoles[i]
              this.form.jobMemberVoList.push(element2)
            }
          }
          if (this.unitList) {
            for (let i = 0; i < this.memberUnits.length; i++) {
              const element3 = this.memberUnits[i]
              this.form.jobMemberVoList.push(element3)
            }
          }
          if (!this?.extraValidateForm) {
            if (this.form.jobMemberVoList.length == 0) {
              this.message.warning('请选择任务接收人')
              return
            }
          }
          // 当重复周期选择不重复时，结束重复重置为3不重复
          if (this.form.jobRepetitionType == 'norepeat') {
            this.form.endRepetitionType = '3'
          }

          this?.submit && this?.submit(this.form, this.returnBack)

          // if (this.form.id) {
          //   jobManageUpdate(this.form).then((res) => {
          //     this.returnBack()
          //   })
          // } else {
          //   jobManageAdd(this.form).then((res) => {
          //     this.returnBack()
          //   })
          // }
        }
      })
    },
    returnBack () {
      if (this.back) {
        this.back(this)
      } else {
        this.$router.go(-1)
      }
    },
    // 获取不可选择的小时
    disabledStartHours () {
      if (this.endFillInTime) {
        let hours = []
        let hour = moment(this.endFillInTime).hour()
        for (let i = hour + 1; i < 24; i++) {
          hours.push(i)
        }
        return hours
      }
    },
    // 获取不可选择的分钟
    disabledStartMinutes (selectedHour) {
      if (this.endFillInTime) {
        let minutes = []
        let hour = moment(this.endFillInTime).hour()
        let minute = moment(this.endFillInTime).minute()
        if (selectedHour === hour) {
          for (let i = minute + 1; i < 60; i++) {
            minutes.push(i)
          }
        }
        return minutes
      }
    },
    // 获取不可选择的秒
    disabledStartSeconds (selectedHour, selectedMinute) {
      if (this.endFillInTime) {
        let seconds = []
        let hour = moment(this.endFillInTime).hour()
        let minute = moment(this.endFillInTime).minute()
        let second = moment(this.endFillInTime).second()
        if (selectedHour === hour && selectedMinute === minute) {
          for (let i = second + 1; i < 60; i++) {
            seconds.push(i)
          }
        }
        return seconds
      }
    },
    // 获取不可选择的小时
    disabledEndHours () {
      if (this.startFillInTime) {
        let hours = []
        let hour = moment(this.startFillInTime).hour()
        for (let i = 0; i < hour; i++) {
          hours.push(i)
        }
        return hours
      }
    },
    // 获取不可选择的分钟
    disabledEndMinutes (selectedHour) {
      if (this.startFillInTime) {
        let minutes = []
        let hour = moment(this.startFillInTime).hour()
        let minute = moment(this.startFillInTime).minute()
        if (selectedHour === hour) {
          for (let i = 0; i < minute; i++) {
            minutes.push(i)
          }
        }
        return minutes
      }
    },
    // 获取不可选择的秒
    disabledEndSeconds (selectedHour, selectedMinute) {
      if (this.startFillInTime) {
        let seconds = []
        let hour = moment(this.startFillInTime).hour()
        let minute = moment(this.startFillInTime).minute()
        let second = moment(this.startFillInTime).second()
        if (selectedHour === hour && selectedMinute === minute) {
          for (let i = 0; i < second; i++) {
            seconds.push(i)
          }
        }
        return seconds
      }
    },
    convertToChinaNum (num) {
      let arr1 = new Array('零', '一', '两', '三', '四', '五', '六', '七', '八', '九')
      let arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿')// 可继续追加更高位转换值
      if (!num || isNaN(num)) {
        return '零'
      }
      let english = num.toString().split('')
      let result = ''
      for (let i = 0; i < english.length; i++) {
        let des_i = english.length - 1 - i// 倒序排列设值
        result = arr2[i] + result
        let arr1_index = english[des_i]
        result = arr1[arr1_index] + result
      }
      // 将【零千、零百】换成【零】 【十零】换成【十】
      result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
      // 合并中间多个零为一个零
      result = result.replace(/零+/g, '零')
      // 将【零亿】换成【亿】【零万】换成【万】
      result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
      // 将【亿万】换成【亿】
      result = result.replace(/亿万/g, '亿')
      // 移除末尾的零
      result = result.replace(/零+$/, '')
      // 将【零一十】换成【零十】
      // result = result.replace(/零一十/g, '零十');
      // 貌似正规读法是零一十
      // 将【一十】换成【十】
      result = result.replace(/^一十/g, '十')
      return result
    }
  }
}
</script>
<style lang="less" scoped>
.ant-select {
  width: 100%;
}

.ant-input-number {
  width: 100%;
}

.ant-time-picker {
  width: 100%;
}

.font-style {
  color: #ffffff;
}

.row-style {
  background-color: #1890ff;
  border-radius: 1px;
  margin-top: 5px;
}

.weeks-panel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-left: 1px solid rgb(217, 217, 217);

  &-item {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: var(--font-size-def);
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    border-top: 1px solid rgb(217, 217, 217);
    border-right: 1px solid rgb(217, 217, 217);
    border-bottom: 1px solid rgb(217, 217, 217);

    &.active {
      color: #fff;
      background: #1890ff;
    }
  }
}

.days-panel {
  display: flex;
  flex-wrap: wrap;
  width: 355px;
  border: 1px solid rgb(217, 217, 217);
  box-sizing: border-box;

  &-item {
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;

    &.active {
      color: #fff;
      background: #1890ff;
    }

    .anticon-check {
      position: absolute;
      top: 15px;
      right: 5px;
      font-size: 12px;
      color: #1890ff;
    }
  }
}

.round-style {
  position: relative;

  .ant-select {
    width: 97%;
  }

  .title {
    position: absolute;
    // right: -24px;
    right: -3%;
    top: -10px;
  }
}
</style>